<template>
    <div>
        <title-header :title="title"></title-header>
        <div class="coupon-card">
            <flexbox class="coupon-block">
                <flexbox-item :span="4" class="cardLeft">
                    <div class="flex-demo">
                        10元
                    </div>
                </flexbox-item>
                <flexbox-item>
                    <div class="flex-demo cardRight">
                        粮油用品10元优惠劵
                        <p>有效期：2018-02-24 至 2018-03-24</p>
                    </div>
                </flexbox-item>
            </flexbox>
        </div>
        <div class="content">
            使用须知
            <ul>
                <li>不限购买金额</li>
                <li>限团购</li>
                <li>限指定商品</li>
            </ul>
        </div>
        <div class="content">
            注意事项
            <ul>
                <li>下单后在"商家劵"中选择</li>
                <li>抵用劵每次只能使用一张</li>
                <li>不找零不兑换</li>
                <li>成功下单后抵用劵即作废，申请退款后无法退款</li>
            </ul>
        </div>
    </div>
</template>
<script>
import TitleHeader from '@/components/titleHeader.vue'
import { Flexbox, FlexboxItem } from 'vux'

export default {
  components: {
    TitleHeader,
    Flexbox,
    FlexboxItem
  },
  data() {
    return {
      title: '优惠劵详情'
    }
  }
}
</script>
<style scoped>
.coupon-card {
  background: #fff;
  margin: 15px;
}
.coupon-block {
  height: 6rem;
}
.cardLeft {
  background: #f5f5f5;
  height: 100%;
  color: #f43530;
  font-size: 1.6rem;
  text-align: center;
}
.cardLeft > div {
  margin-top: 24%;
}
.cardRight > p {
  font-size: 0.8rem;
  color: #999999;
  padding-top: 10px;
}
.content {
  padding: 15px;
  background: #fff;
  margin-bottom: 5px;
  font-size: 0.95rem;
}
.content ul {
  padding-top: 10px;
  padding-left: 20px;
}
</style>
